import React, { Component } from 'react'
import styles from "../assets/styles/tabb.module.css"

export default class TabB extends Component {
  state = {
    tabs: [
      { id: 1, title: "吃饭", state: true },
      { id: 2, title: "睡觉", state: false },
      { id: 3, title: "打豆豆", state: false }
    ],
    currentState:"all"
  }
  get filterData(){
    const {tabs,currentState} = this.state
    switch(currentState){
      case "all":return tabs;
      case "done":return tabs.filter(item=>item.state)
      case "undone":return tabs.filter(item=>!item.state)
    }
  }

  changeTabState = (id) => {
    const { tabs } = this.state
    const index = tabs.findIndex(item => item.id == id)
    tabs[index].state = !tabs[index].state
    this.setState({
      tabs
    })
  }
  addTask = (event) => {
    const value = event.target.value
    const {tabs} = this.state
    const obj = {
      id:Date.now(),
      title:value,
      state:false
    }

    tabs.push(obj)
    this.setState({
      tabs
    })
  }

  checkedBtn = (value)=>{
    this.setState({
      currentState:value
    })
  }

  render() {
    const { tabs } = this.state
    return (
      <React.Fragment>
        <h2 className='title'>TabB</h2>
        <input type="text" onBlur={this.addTask} />
        <ul>
          {this.filterData.map(item => {
            return <li onClick={() => this.changeTabState(item.id)} index={item.id} key={item.id} className={item.state ? styles.active : ""}>{item.title}</li>
          })}
        </ul>
        <button onClick={()=>this.checkedBtn("all")}>全部</button>
        <button onClick={()=>this.checkedBtn("done")}>已完成</button>
        <button onClick={()=>this.checkedBtn("undone")}>未完成</button>
      </React.Fragment>

    )
  }
}
